<template>
  <div class="gradient-color">
    <base-map />
    <div class="panel">
      <el-button @click="addLineGradient">加载线性渐变</el-button>
      <el-button @click="closeDraw">结束绘制</el-button>
      <el-button @click="clear">清空</el-button>

      <el-button @click="addLineGradient2">完全式方法加载渐变</el-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";

import { Polygon } from "ol/geom";
import Feature from "ol/Feature";
import { Style, Fill, Stroke, Circle } from "ol/style";

import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";

import { DEVICE_PIXEL_RATIO } from "ol/has";

const coordinates = [
  [113.15765066679499, 23.80244328259221],
  [113.05534048613093, 23.630011784679894],
  [113.32759542997859, 23.62966829564023],
  [113.15765066679499, 23.80244328259221],
];
let vectorSource, vectorLayer;
let draw;

onMounted(() => {
  // console.log("window.devicePixelRatio", window.devicePixelRatio);
  // console.log("DEVICE_PIXEL_RATIO", DEVICE_PIXEL_RATIO);
  // console.log("window.innerWidth", window.innerWidth);
  // console.log("window.innerHeight", window.innerHeight);
});

function clear() {
  vectorSource?.clear();
}

function initLayer() {
  vectorSource = new VectorSource({
    features: [],
  });

  vectorLayer = new VectorLayer({
    source: vectorSource,
  });

  window.map.addLayer(vectorLayer);
}

function addLineGradient() {
  // 创建矢量图层
  initLayer();

  // 设置渐变样式
  vectorLayer.setStyle(setGradientStyle);

  // 交互式绘制矩形
  drawPolygon();
}

function drawPolygon() {
  // 创建绘制交互
  draw = new Draw({
    source: vectorSource,
    type: "Circle",
    geometryFunction: createBox(),
  });

  // 添加交互到地图
  window.map.addInteraction(draw);

  // 监听绘制完成事件
  draw.on("drawend", function (event) {
    const feature = event.feature;
    console.log("绘制的多边形:", feature.getGeometry().getCoordinates());
  });
}

function closeDraw() {
  window.map.removeInteraction(draw);
}

function setGradientStyle(feature, resolution) {
  const coordinates = feature.getGeometry().getCoordinates()[0];

  const startPoint = window.map.getPixelFromCoordinate(coordinates[0]);
  const endPoint = window.map.getPixelFromCoordinate(coordinates[1]);

  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  // 创建渐变
  // let gradient = context.createLinearGradient(
  //   startPoint[0] * DEVICE_PIXEL_RATIO,
  //   startPoint[1] * DEVICE_PIXEL_RATIO,
  //   endPoint[0] * DEVICE_PIXEL_RATIO,
  //   endPoint[1] * DEVICE_PIXEL_RATIO
  // );

  let gradient = context.createLinearGradient(
    0 * DEVICE_PIXEL_RATIO,
    0,
    1092 * DEVICE_PIXEL_RATIO,
    0
  );

  gradient.addColorStop(0, "rgba(255, 0, 0, 1)"); // 渐变开始颜色
  gradient.addColorStop(1, "rgba(0, 0, 255, 1)"); // 渐变结束颜色

  return new Style({
    fill: new Fill({
      color: gradient,
    }),
  });
}

function addLineGradient2() {
  // 创建矢量图层
  initLayer();

  设置渐变样式
  vectorLayer.setStyle(
    new Style({
      renderer: function (coordinates, state) {
        const arr = coordinates[0];
        const ctx = state.context;

        // 创建渐变
        let gradient = ctx.createLinearGradient(
          Math.min(...arr.map(item => item[0])) * DEVICE_PIXEL_RATIO,
          0,
          Math.max(...arr.map(item => item[0])) * DEVICE_PIXEL_RATIO,
          0
        );

        gradient.addColorStop(0, "rgba(255, 0, 0, 1)"); // 渐变开始颜色
        gradient.addColorStop(1, "rgba(0, 0, 255, 1)"); // 渐变结束颜色

        ctx.fillStyle = gradient;

        // 绘制矩形
        ctx.beginPath();

        arr.forEach((point, index) => {
          if (index === 0) {
            ctx.moveTo(point[0], point[1]);
          } else {
            ctx.lineTo(point[0], point[1]);
          }
        });

        ctx.closePath();

        ctx.fill();
      },
    })
  );

  // 交互式绘制矩形
  drawPolygon();
}
</script>

<style lang="less" scoped>
.gradient-color {
}

.panel {
  position: fixed;
  top: 10px;
  left: 150px;
  z-index: 9999;
}
</style>
